<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%> 
<%@ taglib prefix="s" uri="/struts-tags"%>    
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Now Status</title>

<link href="/gxjc/view/css/bootstrap.min.css" rel="stylesheet">
<link href="/gxjc/view/css/datepicker3.css" rel="stylesheet">
<link href="/gxjc/view/css/styles.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
		function hestory(){
			var nodeId = document.getElementById("nodeId").value;
			var url = "/gxjc/nodedata_informationView?nodeId="+nodeId;
			window.location=url;
		}
	</script>
<script type="text/javascript">
	function getNode() {  
	    var $homeId = $("#homeId");  
	    var homeId = $homeId.val();  
	    $.ajax({  
	        url : "/gxjc/node_getNodeByHomeId",  
	        type : "GET",  
	        data : "homeId=" + homeId,  
	        success : function(data, textStatus) {  
	        	var options = eval("("+data+")");
	        	var optionArr = document.getElementById("nodeId").options; 
	        	optionArr.length=0; 
	        	if(options.length>0){
	        		var newOption = document.createElement("option"); 
	        		newOption.value=""; 
	                newOption.text="  ";
	        		optionArr.add(newOption);
	        	}
	        	for(var i=0;i<options.length;i++){	        			
	        		var newOption = document.createElement("option"); 
	                newOption.value=options[i].id; 
	                newOption.text=options[i].name;
	                optionArr.add(newOption);
	        	}
	        }  
	    });  
	}  
	
	</script>
</head>

<body>
	<!-- 顶部开始 -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">				
				<a class="navbar-brand" href="#"><span>国信</span>现代农业物联网系统</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <s:property value="#session.User.username"/> <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<!-- <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>-->
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> 个人设置</a></li> 
							<li><a href="/gxjc/view/logout.jsp"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div><!-- /.container-fluid -->
	</nav>
		<!-- 顶部结束 -->
		<!-- 左侧导航开始 -->
	<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<ul class="nav menu">
			<li class="active"><a href="/gxjc/nodedata_informationView"><span class="glyphicon glyphicon-dashboard"></span>当前状态</a></li>
			<li><a href="/gxjc/view/nodedata_hestoryView"><span class="glyphicon glyphicon-th"></span>历史记录</a></li>
			<li>
				<a href="#">
					<span class="glyphicon glyphicon-stats"></span>账户管理<span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span> 
				</a>
				<ul class="children collapse" id="sub-item-1">
					<li>
						<a class="" href="/gxjc/view/nodedata_preview">
							<span class="glyphicon glyphicon-share-alt"></span> 用户列表
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/nodedata_preview">
							<span class="glyphicon glyphicon-share-alt"></span> 添加账户
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/nodedata_preview">
							<span class="glyphicon glyphicon-share-alt"></span> 添加角色
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/nodedata_preview">
							<span class="glyphicon glyphicon-share-alt"></span> 添加权限
						</a>
					</li>
				</ul>
			</li>
			<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>系统设置</a></li>
			<!--
			铅笔图标
			<li><a href="/gxjc/view/forms.jsp"><span class="glyphicon glyphicon-pencil"></span> </a></li>
			叹号图标
			<li><a href="panels.jsp"><span class="glyphicon glyphicon-info-sign"></span> Alerts &amp; Panels</a></li>
			 -->
			 <li class="parent ">
				<a href="#">
					<span class="glyphicon glyphicon-list"></span>数据管理<span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span> 
				</a>
				<ul class="children collapse" id="sub-item-1">
					<li>
						<a class="" href="/gxjc/view/nodedata_preview">
							<span class="glyphicon glyphicon-share-alt"></span> 添加数据
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/addNode.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 添加节点
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/addHome.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 添加棚室
						</a>
					</li>
					<li>
						<a class="" href="/gxjc/view/home_distribute">
							<span class="glyphicon glyphicon-share-alt"></span> 分配节点
						</a>
					</li>	
					<li>
						<a class="" href="/gxjc/view/addNature.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 添加属性
						</a>
					</li>			
				</ul>
			</li>
		</ul>
	</div><!--/.sidebar-->
		<!-- 左侧导航结束---------------------------------------------------------------- -->
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Now Status</li>
			</ol>
		</div><!--/.row-->
		<br/>
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-body">
					<div class="col-md-6">
							<form role="form" method="post" action="/gxjc/home_distributeNode.jhtml">
								<select class="form-control" name="homeId" id="homeId" onchange="getNode()">
										<s:iterator value="homes" status="st">
											<option  value="<s:property value="id" />"><s:property value="name" /></option>
										</s:iterator> 
								</select>
								<select id="nodeId" class="form-control" name="nodeId" onchange="hestory()">
									<option value="">   </option>
									<s:iterator value="nodes" status="st">
										<s:if test="id==nodeId">
											<option selected="selected" value="<s:property value="id" />"><s:property value="name" /></option>
										</s:if>
										<s:else>
											<option value="<s:property value="id" />"><s:property value="name" /></option>
										</s:else>
									</s:iterator> 
								</select>							
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>空气温度</h4>
						<div class="easypiechart" id="easypiechart1-blue" data-percent="<s:property value="list[0].data" />" ><span class="percent"><s:property value="list[0].data" />℃</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>空气湿度</h4>
						<div class="easypiechart" id="easypiechart1-orange" data-percent="<s:property value="list[1].data" />" ><span class="percent"><s:property value="list[1].data" />%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>土壤温度</h4>
						<div class="easypiechart" id="easypiechart1-red" data-percent="<s:property value="list[2].data" />" ><span class="percent"><s:property value="list[2].data" />℃</span>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>土壤湿度</h4>
						<div class="easypiechart" name="easypiechartclass" id="easypiechart-blue" data-percent="<s:property value="list[3].data" />" ><span class="percent"><s:property value="list[3].data" />%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>光照强度</h4>
						<div class="easypiechart" name="easypiechartclass" id="easypiechart-orange" data-percent="<s:property value="list[4].data" />" ><span class="percent"><s:property value="list[4].data" />LUX</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>CO2浓度</h4>
						<div class="easypiechart" name="easypiechartclass" id="easypiechart-red" data-percent="<s:property value="list[5].data" />" ><span class="percent"><s:property value="list[5].data" />PPM</span>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<!--  
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-blue">
					<div class="panel-heading dark-overlay">System Status</div>
					<div class="panel-body">
						<p>System Status</p>
					</div>
				</div>
			</div>
			
			<div class="col-md-6">
				<div class="panel panel-teal">
					<div class="panel-heading dark-overlay">Home Information</div>
					<div class="panel-body">
						<p>Home Information</p>
					</div>
				</div>
			</div>
		</div>
		-->
	</div>	<!--/.main-->
	  
	<script src="/gxjc/view/js/jquery-1.11.1.min.js"></script>
	<script src="/gxjc/view/js/bootstrap.min.js"></script>
	<script src="/gxjc/view/js/chart.min.js"></script>
	<script src="/gxjc/view/js/chart-data.js"></script>
	<script src="/gxjc/view/js/easypiechart.js"></script>
	<script src="/gxjc/view/js/easypiechart-data.js"></script>
	<script src="/gxjc/view/js/bootstrap-datepicker.js"></script>
	<script>
		//控制左侧下拉列表效果
		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show');
		});
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide');
		});
		
	</script>	
</body>

</html>
